<!DOCTYPE html>
<html>

<head>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <meta charset="utf-8">
    <title>天地图加载GeoServer WMS</title>
    <script src="/Public/js/tianditu.api.js"></script>
    <style>
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        var map = new T.Map('map');
        map.centerAndZoom(new T.LngLat(102.607, 30.652), 5);

        var imageURL =
            'http://localhost:8080/geoserver/WMTS_F/gwc/service/wmts?' +
            'Request=GetTile' +
            '&Service=WMTS' +
            '&Version=1.0.0' +
            '&LAYER=WMTS_F%3ARIVER_SC' +
            '&STYLE=' +
            '&Format=image%2Fpng' +
            '&TILEMATRIXSET=EPSG%3A900913' +
            '&TILEMATRIX=EPSG%3A900913%3A{z}' +
            '&TILEROW={y}' +
            '&TILECOL={x}'

        const southWest = new T.LngLat(97.3474930541613, 25.960892467945655);
        const northEast = new T.LngLat(114.32544881665831, 34.620088235065964);
        const f_bounds = new T.LngLatBounds(southWest, northEast);
        var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18, bounds: f_bounds });
        lay.setZIndex(1000)
        map.addLayer(lay);

        var tileSize = 256;
        function calculatePixelInTileCorrected(lon, lat, zoom, tileMatrixSet) {
            const tileSize = 256;
            // 1. 将经纬度转换为Web墨卡托坐标
            function lon2mercX(lon) {
                return lon * 20037508.34 / 180;
            }
            function lat2mercY(lat) {
                const y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
                return y * 20037508.34 / 180;
            }
            const mercX = lon2mercX(lon);
            const mercY = lat2mercY(lat);
            // 2. 计算初始参数
            const earthCircumference = 2 * Math.PI * 6378137;
            const initialResolution = earthCircumference / tileSize;
            const originShift = earthCircumference / 2;
            const resolution = initialResolution / Math.pow(2, zoom);
            // 3. 计算像素坐标（全局像素坐标系，原点在左上角）
            const pixelX = (mercX + originShift) / resolution;
            const pixelY = (originShift - mercY) / resolution; // 关键修正：Y轴翻转
            // 4. 计算瓦片坐标
            const tileX = Math.floor(pixelX / tileSize);
            const tileY = Math.floor(pixelY / tileSize);
            // 5. 计算瓦片内的像素坐标（I, J）
            const i = Math.floor(pixelX % tileSize); // X方向正常
            const j = Math.floor(tileSize - (pixelY % tileSize) - 1); // 关键修正：Y方向翻转

            return {
                tileX: tileX,
                tileY: tileY,
                i: i,
                j: j,
                globalPixelX: pixelX,
                globalPixelY: pixelY,
                pixelInTileX: pixelX % tileSize,
                pixelInTileY: pixelY % tileSize
            };
        }


        map.addEventListener('click', function (e) {
            var lnglat = e.lnglat;
            var zoom = map.getZoom();


            var res = calculatePixelInTileCorrected(lnglat.lng, lnglat.lat, zoom, 'EPSG:900913')

            var wmtsUrl = 'http://localhost:8080/geoserver/WMTS_F/gwc/service/wmts'; // WMTS服务地址

            var url = wmtsUrl + '?' +
                'VERSION=1.0.0' +
                '&LAYER=WMTS_F:RIVER_SC' +
                '&STYLE=' +
                '&TILEMATRIX=EPSG:900913:' + zoom +
                '&TILEMATRIXSET=EPSG:900913' +
                '&SERVICE=WMTS' +
                '&FORMAT=image/png' +
                '&REQUEST=GetFeatureInfo' +
                '&INFOFORMAT=application/json' +
                '&TileCol=' + res.tileX +
                '&TileRow=' + res.tileY +
                '&I=' + Math.floor(res.pixelInTileX) +
                '&J=' + Math.floor(res.pixelInTileY)
            $.get(url).then(res => {
                if (res.features.length > 0) {
                    console.log(res.features[0].properties)
                }

            })
            // console.log(res.pixelInTileX,res.pixelInTileY)
        });



    </script>
</body>

</html>